<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style type="text/css">
	table, th, td
  {
  border-collapse:collapse;
  border: 1px solid blue;
  }
</style>

</head>
<body>
	<p>名字：</p><input type="text" id="name"></br>

	<p>性别：</p><select id="sex">
	<option value="false">男</option>
	<option value="true">女</option>
	</select></br>
	
	<p>工资：</p><input type="text" id="sal"></br>
	
	<p>日期：</p><input type="date" id="birth"></br>
	<button class="addbtn">add</button></br>
	<table id="customers">
	
	</table>
	
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body">
                  <div class="form-horizontal">
                      <div class="control-group">
                          <label class="control-label" for="uduid">id</label>
                          <div class="controls">
                              <input type="text" id="uduid" name="id" disabled="disabled">
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="uduname">name</label>
                          <div class="controls">
                              <input type="text" id="uduname" name="name">
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="udusal">salary</label>
                          <div class="controls">
                              <input type="text" id="udusal" name="sal">
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="usex">sex</label>
                          <div class="controls">
                              <select id="udusex">
								<option value="false" id="male" >男</option>
								<option value="true" id="female">女</option>
							</select>
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="ubirth">birth</label>
                          <div class="controls">
                              <input type="date" id="udubirth" name="birth">
                          </div>
                      </div>
                      <div class="control-group">
                          <div class="controls">
                              <button class="btn" id="udaddbtn">Update</button>
                          </div>
                      </div>
                  </div>
                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="pushReason">PUSH</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->



<script type="text/javascript">
(function(){
	var obj={};
	obj.ajax=function(type,url,data,headers,context,callback){
		$.ajax({type:type,url:url,data:JSON.stringify(data),headers:headers,context:context})
		.done(callback);
	};
	window.j=obj;
})();

function CustomersComponent(template){
	this.model=null;
	this.template=template;
	this.addCustomer=function(customer){
		j.ajax("POST","addCustomer",customer,{"Content-Type":"application/json"},this,function(customer){
			this.model.push(customer);
			_render(this.model);
		});
	};
	this.updateCustomer=function(customer){
		j.ajax("PUT","updateCustomer",customer,{"Content-Type":"application/json"},this,function(customer){
			this.model.push(customer);
			$("#myModal").modal("hide");
			_render(this.model);
		});		
	};

	this.findAllCustomers=function(){
		j.ajax("GET","findAllCustomers",null,null,this,function(customers){
			this.model=customers;
			_render(this.model);
		});
		
	};
	function _render(data){
		template.empty();
		data.forEach(function(item){
            $("<tr></tr>").appendTo(template);
            $("<td>"+item.id+"</td>").appendTo(template);
            if(item.sex==true){
                $("<td>"+"女"+"</td>").appendTo(template);
            };
            if(item.sex==false){
                $("<td>"+"男"+"</td>").appendTo(template);
            };
            $("<td>"+item.cname+"</td>").appendTo(template);
            $("<td>"+item.sal+"</td>").appendTo(template);
            $("<td>"+item.birth+"</td>").appendTo(template);
            $("<button>删除</button>").attr("class","delete").attr("id",item.id).data(item).appendTo(template);
            $("<button>更新</button>").attr("class","update").attr("id",item.id).data(item).appendTo(template);
		});
		
		
		$("button.delete").on("click",function(){			
			$this=$(this);
			j.ajax("DELETE","deleteCustomer?id="+$this.data().id,null,null,this,function(m){
				data=data.filter(function(item){
					return item.id!=$this.data().id;
				});
				_render(data);
			});
			
		});
		
		$("button.update").on("click",function(){
			$("#myModal").modal("show");
			$this=$(this);
			alert($this.data().id);
            $("#uduid").val($this.data().id);            
            $("#uduname").val($this.data().cname);
            $("#udusal").val($this.data().sal);
            if($this.data().sex){
            	$("#female").attr("selected", "selected");
            }
            if(!$this.data().sex){
            	$("#male").attr("selected", "selected");
            }
            $("#udubirth").val($this.data().birth);         
		});
		
		
	}
	
}


$(function(){
	var c=new CustomersComponent($("#customers"));
	c.findAllCustomers();
	$(".addbtn").on("click",function(e){
		var c1={cname:$("#name").val(),sex:$("#sex").val(),sal:$("#sal").val(),birth:$("#birth").val()};
		c.addCustomer(c1);
		e.preventDefault();
	});
	
	$("#udaddbtn").on("click",function(e){
		var user={id:$("#uduid").val(),cname:$("#uduname").val(),sex:$("#udusex").val(),sal:$("#udusal").val(),birth:$("#udubirth").val()};
		c.updateCustomer(user);
		e.preventDefault();
		
	})
	
	
	
	
	
	
})
	
</script>
</body>
</html>